tg-me.com/code_breakers/618
Last Update:
💻 Мануал Bubble для ноукодера: настройка адаптивности
Мы продолжаем рассказывать об одном из самых мощных No-code инструментов — Bubble. Если вы вдруг пропустили наши предыдущие посты на эту тему, то их можно прочитать по тегу #code_breakers_мануал_bubble. А сегодня мы расскажем про настройку адаптивности.
Настройка адаптивности
Responsive Engine — движок для настройки адаптивности. Он помогает No-code разработчикам легче прорабатывать правила адаптивности IT-проектов для разных девайсов и размеров экранов.
Responsive Engine позволяет настраивать минимальные и максимальные размеры элементов по умолчанию и относительно размеров экрана, поля и отступы, выравнивание, положение элементов. Настройка происходит через редактор свойств во вкладке Layout.
Давайте разберём, как это работает.
💭 Выравнивание
Адаптивность начинается с настройки группы — контейнера. Внутри контейнера задаются правила выравнивания элементов — в колонку, в строку, выравнивание относительно родительского элемента, фиксированное положение. Внутри контейнеров тоже можно создавать контейнеры и выставлять каждому свои правила адаптивности. К примеру, есть большой контейнер с правилами настроек колонка — в нём элементы выстраиваются сверху вниз. Внутри большого колончатого контейнера могут быть другие контейнеры. Внутри них задаются свои правила адаптивности — к примеру, в строку, тогда элементы выстроятся горизонтально.
💭 Поля и отступы
Также отдельно для каждого контейнера задаются поля и отступы — margins и paddings, в дизайнерской среде прижились англицизмы марджины и паддинги. Они настраиваются в пикселях. Вы можете отдельно настраивать верхние и нижние, правые и левые поля и отступы. Правилам настройки отступов подчинятся все элементы в одном контейнере.
💭 Минимальные и максимальные размеры
Если вы задаёте элементу эти параметры, то можете управлять его отображением относительно размеров экранов, на которых будет открываться приложение. Допустим, у вас есть изображение на стартовом экране, которое будет лишним на мобильном экране и занимать там слишком много места. Вы можете задать правило уменьшения размеров изображения при достижении экранов определённой ширины или вовсе задать правило делать элемент невидимым при определённом размере экрана.
➖➖➖➖➖➖➖➖➖➖➖➖➖
Если вы хотите освоить один из самых востребованных инструментов в сфере No-code разработки и быстро начать зарабатывать на новом навыке, — приходите к нам на курс «Разработка веб-приложений на Bubble». Стартуем уже завтра, 13 сентября!
💻 Хочу на курс по Bubble: codebreakers.tech/bubble
Реклама. ИП Радзиевская М.В. ИНН 263402002977. Erid: 2Ranyo1K3Ck.
BY Code Breakers | No-code solutions
Share with your friend now:
tg-me.com/code_breakers/618